import Vue from 'vue'
import { themeSetting } from '@/setting/app-setting'
import { themeConst } from '@/constant'

const app = {
  state: {
    device: 'desktop',

    theme: themeSetting.navTheme,

    color: themeSetting.color,

    colorWeak: themeSetting.colorWeak,

    layout: themeSetting.layout,

    contentWidth: themeSetting.contentWidth,

    sidebar: true,

    fixSidebar: themeSetting.fixSidebar,

    fixedHeader: themeSetting.fixedHeader,

    autoHideHeader: themeSetting.autoHideHeader
  },

  getters: {},

  mutations: {
    TOGGLE_DEVICE: (state, device) => {
      state.device = device
    },

    TOGGLE_THEME: (state, theme) => {
      state.theme = theme
      Vue.ls.set(themeConst.DEFAULT_THEME, theme)
    },

    TOGGLE_COLOR: (state, color) => {
      state.color = color
      Vue.ls.set(themeConst.DEFAULT_COLOR, color)
    },

    TOGGLE_COLOR_WEAK: (state, colorWeak) => {
      state.colorWeak = colorWeak
      Vue.ls.set(themeConst.DEFAULT_COLOR_WEAK, colorWeak)
    },

    TOGGLE_LAYOUT: (state, layout) => {
      state.layout = layout
      Vue.ls.set(themeConst.DEFAULT_LAYOUT, layout)
    },

    TOGGLE_CONTENT_WIDTH: (state, type) => {
      Vue.ls.set(themeConst.DEFAULT_CONTENT_WIDTH_TYPE, type)
      state.contentWidth = type
    },

    SET_SIDEBAR_TYPE: (state, type) => {
      state.sidebar = type
      Vue.ls.set(themeConst.SIDEBAR_TYPE, type)
    },

    CLOSE_SIDEBAR: (state) => {
      // FIXME 待确认
      Vue.ls.set(themeConst.SIDEBAR_TYPE, true)
      state.sidebar = false
    },

    TOGGLE_FIXED_SIDEBAR: (state, fixed) => {
      state.fixSidebar = fixed
      Vue.ls.set(themeConst.DEFAULT_FIXED_SIDEBAR, fixed)
    },

    TOGGLE_FIXED_HEADER: (state, fixed) => {
      state.fixedHeader = fixed
      Vue.ls.set(themeConst.DEFAULT_FIXED_HEADER, fixed)
    },

    TOGGLE_FIXED_HEADER_HIDDEN: (state, show) => {
      state.autoHideHeader = show
      Vue.ls.set(themeConst.DEFAULT_FIXED_HEADER_HIDDEN, show)
    }
  },

  actions: {
    toggleDevice ({ commit }, device) {
      commit('TOGGLE_DEVICE', device)
    },

    toggleTheme ({ commit }, theme) {
      commit('TOGGLE_THEME', theme)
    },

    toggleColor ({ commit }, color) {
      commit('TOGGLE_COLOR', color)
    },

    toggleColorWeak ({ commit }, colorWeak) {
      commit('TOGGLE_COLOR_WEAK', colorWeak)
    },

    toggleLayout ({ commit }, layout) {
      commit('TOGGLE_LAYOUT', layout)
    },

    toggleContentWidth ({ commit }, type) {
      commit('TOGGLE_CONTENT_WIDTH', type)
    },

    setSidebar: ({ commit }, type) => {
      commit('SET_SIDEBAR_TYPE', type)
    },

    closeSidebar ({ commit }, { withoutAnimation }) {
      commit('CLOSE_SIDEBAR', withoutAnimation)
    },

    toggleFixedSidebar ({ commit }, fixedSidebar) {
      commit('TOGGLE_FIXED_SIDEBAR', fixedSidebar)
    },

    toggleFixedHeader ({ commit }, fixedHeader) {
      if (!fixedHeader) {
        commit('TOGGLE_FIXED_HEADER_HIDDEN', false)
      }
      commit('TOGGLE_FIXED_HEADER', fixedHeader)
    },

    toggleFixedHeaderHidden ({ commit }, show) {
      commit('TOGGLE_FIXED_HEADER_HIDDEN', show)
    }
  }
}

export default app
